<!-- 公益志愿者 -->
<template>
	<view class="container pb-30">
		<Navbar title="报告查询" bgColor="#B81115" leftIconColor="#fff" :titleStyle="{color: '#fff'}" />
		
		<view class="content">
			<view class="banner pl-70 mb-30 d-flex">
				<view class="banner_msg d-flex">
					<text class="banner_msg_title pb-30">
						公益志愿 <br />
						以真心传递爱心
					</text>
					
					<text class="banner_msg_describe pt-30">
						数据精灵公益志愿者报告 <br />
						助力公益事业
					</text>
				</view>
				
				<image src="/static/image/publicWelfare/banner.svg" mode="widthFix" class="banner_icon" />
			</view>
		
			<Report class="mb-30" />
			
			<RuleForm btnText="立即查询￥39.8" bgColor="#D88A92" titleStyle="#fff" pageColor="#B81115" />
		</view>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	import Report from '@/query/PublicWelfare/components/Report.vue'
	import RuleForm from '@/query/components/ruleForm.vue'
</script>

<style lang="scss" scoped>
@import '@/query/scss/index.scss';

.container {
	background: linear-gradient(to bottom, #B81115,#fff);
	
	.banner {
		align-items: center;
		justify-content: space-between;
		
		&_msg {
			flex-direction: column;
			&_title {
				border-bottom: 1px solid #fff;;
				line-height: 65rpx;
				color: #fff;
				font: {
					weight: bold;
					style: oblique;
					size: 46rpx;
				}
			}
			&_describe {
				line-height: 40rpx;
				color: #fff;
				font: {
					size: 26rpx;
				}
			}
		}
		
		&_icon {
			width: 300rpx;
		}
	}
	
	.card {
		background-color: #D88A92;
	}
}

		::v-deep {
			.ruleForm_head_title {
				color: #fff;
			}
			.uv-form-item__body__left__content__label {
				color: #fff !important;
			}
			.uni-input-input {
				color: #fff !important;
			}
			.uv-button--primary {
				background-color: rgb(184, 17, 21);
				border-color: rgb(184, 17, 21);
			}
			.checkbox_describe {
				color: #fff !important;
			}
			.checkbox {
				color: #fff !important;
				
				&_btn {
					color: #6642EA !important;
				}
			}
		}
</style>
